<template>
  <div>
    <!-- 按钮接口测试 -->
    <div>
      <el-button @click="begin">登录</el-button>
      <el-button @click="registered">注册</el-button>
      <el-button @click="code">验证码</el-button>
      <el-button @click="list">公告列表</el-button>
      <el-button @click="list_01">公告详情</el-button>
      <el-button @click="class_01">查询论文分类</el-button>
      <el-button @click="class_02">论文列表</el-button>
      <el-button @click="class_03">论文详情</el-button>
      <el-button @click="class_04">我的论文</el-button>
      <!-- <div v-html="ceshi.content"></div> -->
      <div
        v-for="(ceshi_01, index) in ceshi"
        :key="index"
        v-html="ceshi_01.content"
        class="aaa"
      ></div>
      <div
        v-for="(ceshi_02, index) in ceshi_01"
        :key="index"
        v-html="ceshi_02.content"
        class="aaa"
      ></div>
    </div>
    <!-- 分类显示论文标题 -->
    <div style="border: 1px solid #ff0000">
      <div v-for="(item,index) in fl" :key="index">
        <h2>{{item.name}}</h2>
        <ul>
          <li>222</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.category();
  },
  data() {
    return {
      ceshi: [],
      ceshi_01: [],
      // 分类显示论文标题
      fl: "",
    };
  },
  methods: {
    // 分类显示论文标题
    // 查询分类
    category() {
      this.$http.get("/category/").then((res) => {
        // console.log(res);
        this.fl = res.data;
        console.log(this.fl);
      });
    },

    // 登录
    begin() {
      this.$http
        .post("/login/", {
          email: "3410515601@qq.com",
          password: "123456",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 注册
    registered() {
      this.$http
        .post("/register/", {
          email: "3410515601@qq.com",
          password: "123456",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 验证码
    code() {
      this.$http
        .get("/register/email", {
          email: "3410515601@qq.com",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 公告列表
    list() {
      this.$http
        .get("/notice/", {
          page: "1",
          pageSize: "10",
        })
        .then((res) => {
          this.ceshi = res.data;
          console.log(this.ceshi);
        });
    },
    // 公告详情
    list_01() {
      this.$http
        .get("/notice/detail", {
          id: "1",
        })
        .then((res) => {
          this.ceshi_01 = res.data;
          console.log(this.ceshi_01);
        });
    },
    // 查询论文分类
    class_01() {
      this.$http.get("/category/").then((res) => {
        console.log(res);
      });
    },
    // 论文列表
    class_02() {
      this.$http
        .get("/paper/", {
          page: "1",
          pageSize: "10",
        })
        .then((res) => {
          console.log(res);
        });
    },
    // 论文详情
    class_03() {
      this.$http.get("/paper/detail", { id: 1 }).then((res) => {
        console.log(res);
      });
    },
    // 我的论文
    class_04() {
      this.$http
        .get("/paper/userList", {
          page: "1",
          pageSize: "10",
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lanf="less" scoped>
.aaa {
  border: 1px solid #000;
  width: 85vw;
  margin: 0 auto;
}
/* .aaa>>> div p:nth-child(1){
  font-size: 8px;
  border: 1px solid #ff0000;
} */
/* p{
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
} */
#product_content_txt {
  border: 1px solid #ff0000;
}
</style>